import React, { useState } from 'react'


const Child = ()=>{

  console.log('Child 被执行了');

  return (<div>
    Child
  </div>)
}


const App = () => {

    const [count,setCount] = useState(100)

    return (
      <div >

        <h1>{count}</h1>
        <button onClick={()=>{
          setCount(count + 1)
        }}> 点击加 1 </button>
        <hr />

        {/* 
          每次 count 发生改变的时候，都会导致 Child 子组件被重新渲染，但是 count 的改变
          和 Child 子组件又没有任何关系，如果每次改变 count 都重新渲染 Child 子组件，那么
          会太过于消耗和浪费了。
          所以有没有什么办法能让 count 改变的时候不在重新渲染 Child 子组件了呢？
        
        */}
        <Child />
      </div>
  )
}
export default App